<template>

  <div class='list'>
    <div class="list_header">
      <el-row>
        <el-col :span="8" class='tc'>
          <span class='header_font'>排名</span>
        </el-col>
        <el-col :span="8" class='tc'>
          <span class='header_font'>代理人昵称</span>
        </el-col>
        <el-col :span="8" class='tc'>
          <template v-if='type == "1"'>
            <span class='header_font'>完成案件总数(件)</span>
          </template>
          <template v-else-if='type =="2"'>
            <span class='header_font'>返修率(%)</span>
          </template>
          <template v-else-if='type =="3"'>
            <span class='header_font'>发明案件数(件)</span>
          </template>
        </el-col>
      </el-row>
    </div>
    <div class='list_content' >
      <el-row v-for='(item, index) in tableData' :key="index">
        <el-col :span="8" class='tc content_item'>
            <svg class="icon list_icon" aria-hidden="true" v-if="index == 0">
              <use xlink:href="#icon-diyiming"></use>
            </svg>
            <svg class="icon list_icon" aria-hidden="true" v-else-if="index == 1">
              <use xlink:href="#icon-dierming"></use>
            </svg>
            <svg class="icon list_icon" aria-hidden="true" v-else-if="index == 2">
              <use xlink:href="#icon-disanming"></use>
            </svg>
            <span v-else>{{index + 1}}</span>
        </el-col>
        <el-col :span="8" class='tc'>
          <span :class="index == 0 || index == 1 || index == 2 ? 'font_bold' : ''">{{item.nickname ? item.nickname : '无'}}</span>
        </el-col>
        <el-col :span="8" class='tc'>
          <template v-if='type == 1'>
            <span :class="index == 0 || index == 1 || index == 2 ? 'font_bold' : ''">{{item.agent_finals_count}}</span>
          </template>
          <template v-else-if='type == 2'>
            <span :class="index == 0 || index == 1 || index == 2 ? 'font_bold' : ''">{{item.repairRate}}</span>
          </template>
          <template v-else-if='type == 3'>
            <span :class="index == 0 || index == 1 || index == 2 ? 'font_bold' : ''">{{item.invention_count}}</span>
          </template>
        </el-col>
      </el-row>
    </div>
    <div class="myRank mt20">
      <el-row>
        <el-col :span="8" class='tc'>
          <span class='header_font'>{{myRank.rankSort}}</span>
        </el-col>
        <el-col :span="8" class='tc'>
          <span class='header_font'>{{myRank.nickname}}</span>
        </el-col>
        <el-col :span="8" class='tc'>
          <template v-if='type == 1'>
            <span class="">{{myRank.agent_finals_count}}</span>
          </template>
          <template v-else-if='type == 2'>
            <span class="">{{myRank.repairRate}}</span>
          </template>
          <template v-else-if='type == 3'>
            <span class="">{{myRank.invention_count}}</span>
          </template>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
import moment from 'moment'
export default {
  data () {
    return {
      tableData: [],
      loading: {},
      myRank: {

      }
    }
  },
  props: ['type'],
  create() {

  },
  methods: {
    isloading(type) {
      this.loading = this.$loading({
        lock: true,
        text: '数据加载中。。。',
        spinner: 'el-icon-loading',
        background: 'rgba(255,255,255,.9)',
        target: document.querySelector('.list')
      })
    },
    getTableData(args) {
      let params = {
      }

      if (args) {
        params = {...params, ...args}
      }
      this.$axios.get('api/agent/rank', {params: params}).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data
          this.myRank = res.data.selfRank
          this.loading.close()
        }
      })
    },
  }
}
</script>

<style lang='less' type='text/css'>
  .list {
    width: 100%;
    margin-top: 20px;
    .list_header {
      margin-bottom: 20px;
      .header_font {
        font-size: 16px;
        font-weight: 700;
      }
    }
    .list_content {
      max-height: 500px;
      overflow-y:auto;
      .content_item {
        height: 40px;
        i {
          line-height: 40px;
        }
      }
      .el-col {
        line-height: 40px;
        span {
          line-height: 40px;
        }
      }
      .font_bold {
        font-weight: 700;
      }
      .el-row:hover{
        background: rgb(217, 236, 255);
      }
    }
    .list_icon {
      font-size: 24px;
    }
    .myRank {
      line-height: 40px;
      background: rgb(236, 245, 255);
      font-weight: 700;
    }
  }
</style>
